<template>
  <div class="layout-container">
    <div class="layout-container-form flex">
      <div class="layout-container-form-handle"></div>
      <div class="layout-container-form-search">
        <el-button type="primary" :icon="Plus" @click="handleAdd">{{
          '新增内容'
        }}</el-button>
      </div>
    </div>
    <div class="layout-container-table">
      <Table
        ref="table"
        v-model:page="page"
        v-loading="loading"
        :data="tableData"
        @getTableData="getTableData"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column
          prop="Riskname"
          label="风险分布图名称"
          align="center"
        />
        <el-table-column prop="eare" label="风险区域" align="center" />
        <el-table-column prop="name" label="创建人" align="center" />
        <el-table-column prop="date" label="创建时间" align="center" />
        <el-table-column prop="updateDate" label="修改时间" align="center" />
        <el-table-column prop="image" label="图片" align="center">
          <template #default="scope">
            <el-link @click="handleImg(scope.row)">
              <el-icon><PictureFilled /></el-icon
            ></el-link>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('message.common.handle')"
          align="center"
          fixed="right"
          width="200"
        >
          <template #default="scope">
            <el-button @click="handleSearch(scope.row)">{{ '查看' }}</el-button>
            <el-button @click="handleEdit(scope.row)">{{
              $t('message.common.update')
            }}</el-button>
            <el-popconfirm
              :title="$t('message.common.delTip')"
              @confirm="handleDel([scope.row])"
            >
              <template #reference>
                <el-button type="danger">{{
                  $t('message.common.del')
                }}</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </Table>
      <Layer :layer="layer" @getTableData="getTableData" v-if="layer.show" />
      <ImgLayer v-model="isShow" :imgs="imageUrl" />
     
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, } from 'vue'
import Table from '@/components/table/index.vue'
import { Page } from '@/components/table/type'
import { getData, del } from '@/api/table'
import Layer from './layer.vue'
import ImgLayer from './ImgLayer.vue'
import { ElMessage } from 'element-plus'
import type { LayerInterface } from '@/components/layer/index.vue'
import { selectData, radioData } from './enum'
import { Plus, Search, Delete } from '@element-plus/icons'
export default defineComponent({
  name: 'crudTable',
  components: {
    Table,
    Layer,
    ImgLayer,
  },
  setup() {
    const isShow = ref(false)
    const imageUrl=ref<any>([])
    // 存储搜索用的数据
    const query = reactive({
      input: '',
    })
    // 弹窗控制器
    const layer: LayerInterface = reactive({
      show: false,
      title: '新增',
      showButton: true,
    })
    const imglayer: LayerInterface = reactive({
      show: false,
      title: '图片',
      showButton: true,
    })
    // 分页参数, 供table使用
    const page: Page = reactive({
      index: 1,
      size: 20,
      total: 0,
    })
    const loading = ref(true)
    const tableData = ref([])
    // 获取表格数据
    // params <init> Boolean ，默认为false，用于判断是否需要初始化分页
    const getTableData = (init: boolean) => {
      loading.value = true
      if (init) {
        page.index = 1
      }
      let params = {
        page: page.index,
        pageSize: page.size,
        ...query,
      }
      getData(params)
        .then((res) => {
          let data = res.data.list
          if (Array.isArray(data)) {
            data.forEach((d) => {
              const select = selectData.find(
                (select) => select.value === d.choose
              )
              select ? (d.chooseName = select.label) : (d.chooseName = d.choose)
              const radio = radioData.find((select) => select.value === d.radio)
              radio ? (d.radioName = radio.label) : d.radio
            })
          }
          tableData.value = res.data.list
          page.total = Number(res.data.pager.total)
        })
        .catch((error) => {
          tableData.value = []
          page.index = 1
          page.total = 0
        })
        .finally(() => {
          loading.value = false
        })
    }
    // 删除功能
    const handleDel = (data: object[]) => {
      let params = {
        ids: data
          .map((e: any) => {
            return e.id
          })
          .join(','),
      }
      del(params).then((res) => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        getTableData(tableData.value.length === 1 ? true : false)
      })
    }
    // 新增弹窗功能
    const handleAdd = () => {
      layer.title = '新增数据'
      layer.show = true
      delete layer.row
    }
    // 编辑弹窗功能
    const handleEdit = (row: object) => {
      layer.title = '编辑数据'
      layer.row = row
      layer.showButton = true
      layer.show = true
    }
    // 查看弹窗功能
    const handleSearch = (row: object) => {
      layer.title = '查看数据'
      layer.row = row
      layer.showButton = false
      layer.show = true
    }
    // 图片弹窗功能
    const handleImg = (row: any) => {
      console.log("row",row);
      imageUrl.value=[]
      isShow.value = true
      imageUrl.value.push(row.image)
    }
    getTableData(true)
    return {
      Plus,
      Search,
      Delete,
      query,
      tableData,
      loading,
      page,
      layer,
      imglayer,
      isShow,
      imageUrl,
      handleAdd,
      handleEdit,
      handleDel,
      getTableData,
      handleSearch,
      handleImg,
    }
  },
})
</script>

<style lang="scss" scoped>
</style>
